<template>
  <div class="charity-star">
    <!-- 公益活动列表 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <span>公益活动</span>
            <el-button-group style="float: right;">
              <el-button type="text" @click="filterActivities('all')" :class="{'active-filter': activityFilter === 'all'}">全部</el-button>
              <el-button type="text" @click="filterActivities('volunteer')" :class="{'active-filter': activityFilter === 'volunteer'}">志愿服务</el-button>
              <el-button type="text" @click="filterActivities('donation')" :class="{'active-filter': activityFilter === 'donation'}">爱心捐赠</el-button>
              <el-button type="text" @click="filterActivities('education')" :class="{'active-filter': activityFilter === 'education'}">助学支教</el-button>
            </el-button-group>
          </div>
          <div class="activity-grid">
            <div v-if="filteredActivities.length === 0" class="empty-activities">
              <el-empty description="暂无公益活动" :image-size="80"></el-empty>
            </div>
            <div v-else v-for="activity in filteredActivities" :key="activity.id" class="charity-activity-card">
              <div class="activity-header">
                <div class="activity-title">{{ activity.title }}</div>
                <el-tag :type="getActivityStatusType(activity.status)" size="small">{{ activity.status }}</el-tag>
              </div>
              <div class="activity-content">
                <div class="activity-info">
                  <p><i class="el-icon-location"></i> {{ activity.location }}</p>
                  <p><i class="el-icon-time"></i> {{ formatDate(activity.date) }}</p>
                  <p><i class="el-icon-user"></i> 需要志愿者：{{ activity.volunteers }}人</p>
                </div>
                <div class="activity-description">{{ activity.description }}</div>
                <div class="activity-footer">
                  <span class="activity-reward">奖励：+{{ activity.points }}分</span>
                  <el-button
                    :type="activity.status === '报名中' ? 'primary' : 'info'"
                    size="mini"
                    @click="joinCharityActivity(activity)"
                    :disabled="activity.status !== '报名中'">
                    {{ getActionText(activity.status) }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="8">-->
<!--        <el-card>-->
<!--          <div slot="header">-->
<!--            <span>我的公益等级</span>-->
<!--            <el-button style="float: right; padding: 3px 0" type="text" @click="getCharityLevel">-->
<!--              刷新等级-->
<!--            </el-button>-->
<!--          </div>-->
<!--          <div class="star-level">-->
<!--            <div class="level-display">-->
<!--              <div class="level-stars">-->
<!--                <i v-for="n in 5" :key="n" -->
<!--                   :class="n <= currentLevel ? 'el-icon-star-on' : 'el-icon-star-off'"-->
<!--                   :style="{color: n <= currentLevel ? '#F56C6C' : '#C0C4CC'}">-->
<!--                </i>-->
<!--              </div>-->
<!--              <div class="level-name">{{ getLevelName(currentLevel) }}</div>-->
<!--              <div class="level-progress">-->
<!--                <el-progress -->
<!--                  :percentage="levelProgress" -->
<!--                  :stroke-width="8"-->
<!--                  :show-text="false">-->
<!--                </el-progress>-->
<!--                <div class="progress-text">{{ currentPoints }}/{{ nextLevelPoints }} 积分</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          -->
<!--          <div class="charity-stats">-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-value">{{ totalCharityActivities }}</div>-->
<!--              <div class="stat-label">参与活动</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-value">{{ totalVolunteerHours }}</div>-->
<!--              <div class="stat-label">志愿时长(小时)</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="stat-value">{{ totalDonation }}</div>-->
<!--              <div class="stat-label">爱心捐赠(元)</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>

    <!-- 我的公益记录 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>我的公益记录</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="getCharityRecords">
              刷新记录
            </el-button>
          </div>
          <div v-if="myCharityRecords.length === 0" class="empty-records">
            <el-empty description="暂无公益记录" :image-size="80"></el-empty>
          </div>
          <el-table v-else :data="myCharityRecords" style="width: 100%">
            <el-table-column prop="date" label="日期" width="120">
              <template slot-scope="scope">
                {{ formatDate(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column prop="category" label="活动类型" width="120">
              <template slot-scope="scope">
                <el-tag :type="getTypeColor(scope.row.category)" size="small">{{ scope.row.category }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="activity" label="活动名称" width="150">
            </el-table-column>
            <el-table-column prop="contribution" label="贡献描述">
            </el-table-column>
            <el-table-column prop="hours" label="志愿时长" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.hours }}小时</span>
              </template>
            </el-table-column>
            <el-table-column prop="donationAmount" label="捐赠金额" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.donationAmount > 0" style="color: #E6A23C;">{{ scope.row.donationAmount }}元</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="points" label="获得积分" width="100">
              <template slot-scope="scope">
                <span style="color: #F56C6C;">+{{ scope.row.points }}分</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'" size="small">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCharityActivities, joinCharityActivity, getCharityRecords, getCharityLevel } from '@/api/credit/prosocial'

export default {
  name: "CharityStar",
  data() {
    return {
      activityFilter: 'all',
      currentLevel: 1,
      currentPoints: 0,
      nextLevelPoints: 100,
      charityActivities: [],
      myCharityRecords: [],
      loading: false
    };
  },
  computed: {
    /** 过滤后的公益活动 */
    filteredActivities() {
      if (this.activityFilter === 'all') {
        return this.charityActivities;
      }
      return this.charityActivities.filter(activity => activity.category === this.activityFilter);
    },
    /** 等级进度 */
    levelProgress() {
      if (this.nextLevelPoints <= this.currentPoints) return 100;
      return Math.round((this.currentPoints / this.nextLevelPoints) * 100);
    },
    /** 总公益活动数 */
    totalCharityActivities() {
      return this.myCharityRecords.length;
    },
    /** 总志愿时长 */
    totalVolunteerHours() {
      return this.myCharityRecords.reduce((sum, record) => sum + (record.hours || 0), 0);
    },
    /** 总捐赠金额 */
    totalDonation() {
      return this.myCharityRecords.reduce((sum, record) => {
        if (record.category === '爱心捐赠') {
          return sum + (record.donationAmount || 0);
        }
        return sum;
      }, 0);
    }
  },
  created() {
    this.getCharityActivities();
    this.getCharityRecords();
    this.getCharityLevel();
  },
  methods: {
    /** 获取公益活动列表 */
    getCharityActivities() {
      this.loading = true;
      getCharityActivities().then(response => {
        if (response.code === 200) {
          this.charityActivities = response.data || [];
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 获取公益记录 */
    getCharityRecords() {
      this.loading = true;
      getCharityRecords().then(response => {
        if (response.code === 200) {
          this.myCharityRecords = response.data || [];
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 获取公益等级 */
    getCharityLevel() {
      getCharityLevel().then(response => {
        if (response.code === 200) {
          const levelData = response.data;
          this.currentLevel = levelData.level || 1;
          this.currentPoints = levelData.points || 0;
          this.nextLevelPoints = levelData.nextLevelPoints || 100;
        }
      });
    },

    /** 过滤活动 */
    filterActivities(filter) {
      this.activityFilter = filter;
    },

    /** 获取活动状态类型 */
    getActivityStatusType(status) {
      const typeMap = {
        '报名中': 'success',
        '进行中': 'warning',
        '已结束': 'info'
      };
      return typeMap[status] || 'info';
    },

    /** 获取操作文本 */
    getActionText(status) {
      const textMap = {
        '报名中': '参与',
        '进行中': '进行中',
        '已结束': '已结束'
      };
      return textMap[status] || '参与';
    },

    /** 获取等级名称 */
    getLevelName(level) {
      const nameMap = {
        1: '公益新手',
        2: '公益达人',
        3: '公益专家',
        4: '公益大师',
        5: '公益传奇'
      };
      return nameMap[level] || '公益新手';
    },

    /** 获取类型颜色 */
    getTypeColor(category) {
      const colorMap = {
        '志愿服务': 'success',
        '爱心捐赠': 'warning',
        '助学支教': 'primary'
      };
      return colorMap[category] || 'info';
    },

    /** 参与公益活动 */
    joinCharityActivity(activity) {
      this.$confirm(`确认参与"${activity.title}"活动？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const joinData = {
          activityId: activity.id,
          activityType: 'charity'
        };
        joinCharityActivity(joinData).then(response => {
          if (response.code === 200) {
            this.$message.success('活动参与成功！');
            this.getCharityActivities();
            this.getCharityRecords();
            this.getCharityLevel();
          } else {
            this.$message.error(response.msg || '参与失败');
          }
        }).catch(() => {
          this.$message.error('参与失败，请稍后重试');
        });
      });
    },

    /** 格式化日期 */
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }
  }
};
</script>

<style scoped>
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

.empty-activities,
.empty-records {
  padding: 40px 0;
  text-align: center;
}

.charity-activity-card {
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  padding: 20px;
  background-color: #fafafa;
  transition: all 0.3s;
}

.charity-activity-card:hover {
  border-color: #F56C6C;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.activity-content {
  flex: 1;
}

.activity-info {
  margin-bottom: 10px;
}

.activity-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #606266;
}

.activity-info i {
  margin-right: 5px;
  color: #909399;
}

.activity-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-reward {
  font-size: 14px;
  color: #F56C6C;
  font-weight: bold;
}

.star-level {
  text-align: center;
  padding: 20px 0;
}

.level-display {
  margin-bottom: 20px;
}

.level-stars {
  font-size: 32px;
  margin-bottom: 10px;
}

.level-name {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.level-progress {
  margin-top: 10px;
}

.progress-text {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.charity-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid #EBEEF5;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #F56C6C;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.active-filter {
  color: #F56C6C !important;
  font-weight: bold;
}
</style>
